<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html>

	<head>
		<!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<!--当前页面的三要素-->
		<title>在线学习技术分享平台</title>
		<meta name="Keywords" content="关键词,关键词">
		<meta name="description" content="">
		<link rel="stylesheet" href="resources/layui/css/layui.css" />
		<link rel="stylesheet" href="./resources/css/index.css" charset="utf-8" />
		<link rel="stylesheet" href="./resources/css/common.css" charset="utf-8" />
		<script type="text/javascript" src="./resources/js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="./resources/js/tab.js" charset="utf-8"></script>
		<script type="text/javascript" src="resources/layui/layui.js"></script>
	</head>

	<body>
		<!--header start-->
		<!--end header-->
		<jsp:include page="/pages/common/header.jsp"></jsp:include>
		<script>
			//			$(".header").css("background-color", "#fff");
			//			$(".item a").css("color", "black");
		</script>
		<!--banner start-->
		<div class="banner">
			<!--little-banner start-->
			<div class="little-banner">
				
			</div>
			<!--big-banner start-->
			<div class="big-bg">
				<div class="big-banner">
					<!--big-banner-ul start-->
					<div class="big-banner-ul">
						<a href="#" id="course" class="course">
							<i></i><span>全部课程</span>
						</a>
						<ul id="bigMenu">
							<!--<li class="course-li">-->
							<!--<a href="#" class="course">职业技能</a><i></i>-->
							<!--<a href="#" class="course-hot">职场技能</a>
								<a href="#" class="course-hot">SNS营销</a>
								<a href="#" class="course-hot">公务员</a>-->
							<!--<div class="course-list">-->
							<!--<ul>-->
							<!--<li>
											<a href="#" class="course-child">职场/求职</a>
											<div class="course-child-list">
												<a href="#">就业指导</a>
												<a href="#">职业规划</a>
												<a href="#">职场技能</a>
												<a href="#">企业培训</a>
												<a href="#">创业指导</a>
											</div>
										</li>
										<li>
											<a href="#" class="course-child">市场营销</a>
											<div class="course-child-list">
												<a href="#">淘宝营销</a>
												<a href="#">网络推广</a>
												<a href="#">SNS营销</a>
												<a href="#">SEO/SEM</a>
											</div>
										</li>
										<li>
											<a href="#" class="course-child">职业类考试</a>
											<div class="course-child-list">
												<a href="#">公务员</a>
												<a href="#">财会类</a>
												<a href="#">建筑类</a>
												<a href="#">金融类</a>
												<a href="#">其他考试</a>
											</div>
										</li>
										<li>
											<a href="#" class="course-child">其他技能</a>
											<div class="course-child-list">
												<a href="#">美容培训</a>
												<a href="#">汽车维修</a>
												<a href="#">其他</a>
											</div>
										</li>-->
							<!--</ul>-->
							<!--</div>-->
							<!--</li>-->
							<!--<li class="course-li">-->
							<!--<a href="#" class="course">IT培训</a><i></i>
								<a href="#" class="course-hot">网站制作</a>
								<a href="#" class="course-hot">手机开发</a>
								<a href="#" class="course-hot">游戏制作</a>-->
							<!--<div class="course-list" style="height:332px">-->
							<!--<ul>-->
							<!--<li>
											<a href="#" class="course-child">编程开发</a>
											<div class="course-child-list">
												<a href="#">网站制作</a>
												<a href="#">游戏开发</a>
												<a href="#">手机开发</a>
												<a href="#">数据库</a>
												<a href="#">编程语言</a>
											</div>
										</li>
										<li>
											<a href="#" class="course-child">工具软件</a>
											<div class="course-child-list">
												<a href="#">网页制作</a>
												<a href="#">网页/平面设计</a>
												<a href="#">室内/建筑设计</a>
												<a href="#">机械/模具设计</a>
												<a href="#">游戏制作</a>
												<a href="#">视频处理</a>
												<a href="#">办公</a>
												<a href="#">其他</a>
											</div>
										</li>
										<li>
											<a href="#" class="course-child">游戏设计</a>
											<div class="course-child-list">
												<a href="#">原画设计</a>
												<a href="#">产品设计</a>
											</div>
										</li>
										<li>
											<a href="#" class="course-child">动漫制作</a>
											<div class="course-child-list">
												<a href="#">动漫制作</a>
											</div>
										</li>
										<li>
											<a href="#" class="course-child">其他</a>
											<div class="course-child-list">
												<a href="#">其他</a>
											</div>
										</li>-->
							<!--</ul>-->
							<!--</div>-->
							<!--</li>-->
							<!--<li class="course-li">-->
							<!--<a href="#" class="course">语言学习</a><i></i>
								<a href="#" class="course-hot">英语口语</a>
								<a href="#" class="course-hot">日语</a>
								<a href="#" class="course-hot">韩语</a>-->
							<!--<div class="course-list">-->
							<!--<ul>-->
							<!--<li>
											<a href="#" class="course-child">英语口语</a>
											<div class="course-child-list">
												<a href="#">初级入门</a>
												<a href="#">英语语法</a>
												<a href="#">音标词汇</a>
												<a href="#">口语进阶</a>
												<a href="#">旅行英语</a>
											</div>
										</li>
										<li>
											<a href="#" class="course-child">英语考试</a>
											<div class="course-child-list">
												<a href="#">四/六级</a>
												<a href="#">考研英语</a>
												<a href="#">自考/职称英语</a>
												<a href="#">其他</a>
											</div>
										</li>
										<li>
											<a href="#" class="course-child">留学英语</a>
											<div class="course-child-list">
												<a href="#">雅思</a>
												<a href="#">托福</a>
												<a href="#">SAT</a>
												<a href="#">GRE/GMAT</a>
												<a href="#">留学指导</a>
												<a href="#">其他</a>
											</div>
										</li>
										<li>
											<a href="#" class="course-child">商务英语</a>
											<div class="course-child-list">
												<a href="#">职场英语</a>
												<a href="#">行业英语</a>
												<a href="#">其他</a>
											</div>
										</li>
										<li>
											<a href="#" class="course-child">汉语</a>
											<div class="course-child-list">
												<a href="#">普通话</a>
												<a href="#">粤语</a>
											</div>
										</li>
										<li>
											<a href="#" class="course-child">韩语</a>
											<div class="course-child-list">
												<a href="#">普通话</a>
												<a href="#">粤语</a>
											</div>
										</li>
										<li>
											<a href="#" class="course-child">日语</a>
											<div class="course-child-list">
												<a href="#">初级入门</a>
												<a href="#">日语进阶</a>
											</div>
										</li>
										<li>
											<a href="#" class="course-child">其他</a>
											<div class="course-child-list">
												<a href="#">其他</a>
											</div>
										</li>-->
							<!--</ul>-->
							<!--</div>-->
							<!--</li>-->
							<!--<li class="course-li">-->
							<!--<a href="#" class="course">中小学/大学</a><i></i>
								<a href="#" class="course-hot">考研/自考</a>
								<a href="#" class="course-hot">中考备战</a>-->
							<!--<div class="course-list">-->
							<!--<ul>-->
							<!--<li>
											<a href="#" class="course-child">小学</a>
											<div class="course-child-list">
												<a href="#">语文</a>
												<a href="#">数学</a>
												<a href="#">英语</a>
												<a href="#">其他</a>
											</div>
										</li>
										<li>
											<a href="#" class="course-child">初中</a>
											<div class="course-child-list">
												<a href="#">语文</a>
												<a href="#">数学</a>
												<a href="#">英语</a>
												<a href="#">理综</a>
												<a href="#">文综</a>
												<a href="#">其他</a>
											</div>
										</li>
										<li>
											<a href="#" class="course-child">高中</a>
											<div class="course-child-list">
												<a href="#">语文</a>
												<a href="#">数学</a>
												<a href="#">英语</a>
												<a href="#">理综</a>
												<a href="#">文综</a>
												<a href="#">其他</a>
											</div>
										</li>
										<li>
											<a href="#" class="course-child">小升初备战</a>
											<div class="course-child-list">
												<a href="#">小升初备战</a>
											</div>
										</li>
										<li>
											<a href="#" class="course-child">中考备战</a>
											<div class="course-child-list">
												<a href="#">中考备战</a>
											</div>
										</li>
										<li>
											<a href="#" class="course-child">高考备战</a>
											<div class="course-child-list">
												<a href="#">高考备战</a>
											</div>
										</li>
										<li>
											<a href="#" class="course-child">考研/自考</a>
											<div class="course-child-list">
												<a href="#">考研/自考</a>
											</div>
										</li>-->
							<!--</ul>-->
							<!--</div>-->
							<!--</li>-->
							<!--<li class="course-li">-->
							<!--<a href="#" class="course">兴趣爱好</a><i></i>
								<a href="#" class="course-hot">投资理财</a>
								<a href="#" class="course-hot">美妆</a>
								<a href="#" class="course-hot">摄影</a>-->
							<!--<div class="course-list">-->
							<!--<ul>-->
							<!--<li>
											<a href="#" class="course-child">投资理财</a>
											<div class="course-child-list">
												<a href="#">投资理财</a>
											</div>
										</li>
										<li>
											<a href="#" class="course-child">生活百科</a>
											<div class="course-child-list">
												<a href="#">婚恋</a>
												<a href="#">美妆</a>
												<a href="#">家装</a>
												<a href="#">风水</a>
												<a href="#">其他</a>
											</div>
										</li>
										<li>
											<a href="#" class="course-child">文化艺术</a>
											<div class="course-child-list">
												<a href="#">唱歌</a>
												<a href="#">舞蹈</a>
												<a href="#">书画</a>
												<a href="#">乐器</a>
												<a href="#">摄影</a>
												<a href="#">其他</a>
											</div>
										</li>
										<li>
											<a href="#" class="course-child">时尚健康</a>
											<div class="course-child-list">
												<a href="#">星座</a>
												<a href="#">瑜伽</a>
												<a href="#">养生</a>
												<a href="#">其他</a>
											</div>
										</li>-->
							<!--</ul>-->
							<!--</div>-->
							<!--</li>-->
							<!--<li class="course-li">-->
							<!--<a class="course">亲子课堂</a><i></i>
								<a href="#" class="course-hot">幼儿教育</a>
								<a href="#" class="course-hot">家长训练营</a>-->
							<!--<div class="course-list">-->
							<!--<ul>-->
							<!--<li>
											<a href="#" class="course-child">幼儿教育</a>
											<div class="course-child-list">
												<a href="#">幼儿教育</a>
											</div>
										</li>
										<li>
											<a href="#" class="course-child">学前早教</a>
											<div class="course-child-list">
												<a href="#">学前早教</a>
											</div>
										</li>
										<li>
											<a href="#" class="course-child">家长训练营</a>
											<div class="course-child-list">
												<a href="#">家长训练营</a>
											</div>
										</li>-->
							<!--</ul>-->
							<!--</div>-->
							<!--</li>-->
						</ul>
					</div>
					<!--end big-banner-ul-->

					<!--big-banner-img start-->
					<div class="big-banner-img">
						<ul id="ban-ul">
							<li>
								<a href="#" class="on">
									<img src="resources/images/banner-1.jpg" alt="应试宝" width="760" height="300" border="0" />
								</a>
							</li>
							<li>
								<a href="#" class="img-hide">
									<img src="resources/images/banner-2.jpg" alt="中公-金融人" width="760" height="300" border="0" />
								</a>
							</li>
							<li>
								<a href="#" class="img-hide">
									<img src="resources/images/banner-3.jpg" alt="潭州学院" width="760" height="300" border="0" />
								</a>
							</li>
							<li>
								<a href="#" class="img-hide">
									<img src="resources/images/banner-4.jpg" alt="邢帅教育" width="760" height="300" border="0" />
								</a>
							</li>
							<li>
								<a href="#" class="img-hide">
									<img src="resources/images/banner-5.jpg" alt="云中帆教育" width="760" height="300" border="0" />
								</a>
							</li>
						</ul>
						<ul id="ban-nav">
							<li data-color="#a534d6"></li>
							<li data-color="#3979ce"></li>
							<li data-color="#4a4d9c"></li>
							<li data-color="#523484"></li>
							<li data-color="#009ee7"></li>
						</ul>
						<a href="javascript:void(0)" class="ban-button ban-pre"></a>
						<a href="javascript:void(0)" class="ban-button ban-next"></a>
					</div>
					<!--end big-banner-img-->

					<!--big-banner-board start-->
					<div class="big-banner-board">
						<ul>
							<li>
								<a href="#">2015考研英语名师解析</a>
							</li>
							<li>
								<a href="#">打破富不过三代的魔咒</a>
							</li>
							<li>
								<a href="#">网站制作达人分享</a>
							</li>
							<li>
								<a href="#">海归型男的中秋邂逅</a>
							</li>
						</ul>
						<a href="#" class="button"><i class="download"></i>
							<p>下载</p>
							<p>专用QQ</p>
						</a>
						<div id="board-qr" class="button">
							<i class="weixin"></i>
							<p>扫一扫</p>
							<p>QQ公众号</p>
							<img src="resources/images/bg-board-qr.png" width="126" height="126" />
						</div>
						<div class="clear"></div>
					</div>
					<!--end big-banner-board-->
				</div>
			</div>
			<!--end big-banner-->
		</div>
		<!--end banner-->

		<!--start warp-->
		<div class="wrap-act">
			<div class="banner-engineer">
				<a href="#" class="engineer-item">
					<i class="i-web"></i>
					<p class="engineer-a">Web前端攻城狮</p>
					<p class="engineer-b">互联网时代最火爆的技术</p>
				</a>
				<a href="#" class="engineer-item">
					<i class="i-java"></i>
					<p class="engineer-a">Java攻城狮</p>
					<p class="engineer-b">健壮、安全、适用广泛</p>
				</a>
				<a href="#" class="engineer-item">
					<i class="i-and"></i>
					<p class="engineer-a">Android攻城狮</p>
					<p class="engineer-b">移动设备市场份额第一</p>
				</a>
				<a href="#" class="engineer-item">
					<i class="i-php"></i>
					<p class="engineer-a">PHP攻城狮</p>
					<p class="engineer-b">世界上最好的语言:)</p>
				</a>
				<a href="#" class="engineer-item">
					<i class="i-ios"></i>
					<p class="engineer-a">iOS攻城狮</p>
					<p class="engineer-b">可能是全球最好用的系统</p>
				</a>
			</div>
		</div>
		<!--end warp-->

		<!--course-hot start-->
		<div class="course_h">
			<div class="course_hot first-course">
				<div class="course-hot-nav">
					<h2><a href="" class="hot-tittle">热门课程</a></h2>
					<ul id="course-type">
						<li class="course_li_on">
							<a href="" style="color:#188eee">推荐课程</a>
						</li>
						<li id="freecourse">
							<a href=""><i id="video"></i>热门课程</a>
						</li>
					</ul>
				</div>
				<div class="course_box">

					<ul class="recommend">
					</ul>

					<ul class="img-hide" id="free">
					</ul>
				</div>
			</div>
		</div>
		<!--end course-hot-->

		<!--course_hot start-->

		<div class="course_h2 ">
			<div class="course_hot">
				<div class="course-hot-nav">
					<h2><a href="#" class="hot-tittle box">IT培训</a></h2>
					<ul class="job-type">
					</ul>
				</div>
				<div class="catalog-menu">
					<a href="#" class="mod-catalog-box"><img src="resources/images/catalog-box3.png" alt="UG造型、模具设计" title="UG造型、模具设计" width="240" height="420" border="0" /></a>
					<div class="catalog-menu-div">
						<ul class="oneType">
						</ul>
						<ul class="img-hide" id="twoType">

						</ul>
						<ul class="img-hide " id="threeType">

						</ul>
						<ul class="img-hide" id="fourType">

						</ul>
					</div>
					<div class="course-rank">
						<ul class="rank-type">
							<li class="rank-type-sel">免费排行</li>
							<li>付费排行</li>
						</ul>
						<div class="rank-menu">
							<ul class="rank-menu-ul">
								<li class="rank-menu-li-first">
									<i class="rank-menu-num rank-menu-num-1"></i>
									<div class="rank-menu-content">
										<a href="#" class="rank-description" title="人际关系和搭讪沟通技巧【潭州学院】">人际关系和搭讪沟通技巧【潭州学院】</a>
										<a href="#" class="rank-free-img"><img src="resources/images/rank-menu1.jpg" alt="人际关系和搭讪沟通技巧【潭州学院】" width="90" height="50" border="0" /></a>
										<div class="rank-menu-course">
											<span class="charge" style="font-size:14px">40040人</span>
											<span class="rank-college">潭州学院</span>
										</div>
										<div class="clear"></div>
									</div>
								</li>
								<li>
									<i class="rank-menu-num rank-menu-num-2"></i>
									<a href="#" class="rank-description rank-description-other" title="新手开网店赚钱必学系列教程">新手开网店赚钱必学系列教程</a>
								</li>
								<li>
									<i class="rank-menu-num rank-menu-num-3"></i>
									<a href="#" class="rank-description rank-description-other" title="会计那些儿事儿，会计从业课程趣讲">会计那些儿事儿，会计从业课程趣讲</a>
								</li>
								<li>
									<i class="rank-menu-num rank-menu-num-4"></i>
									<a href="#" class="rank-description rank-description-other" title="CAD短期培训速成/挑战月薪5000+">CAD短期培训速成/挑战月薪5000+</a>
								</li>
								<li>
									<i class="rank-menu-num rank-menu-num-5"></i>
									<a href="#" class="rank-description rank-description-other" title="【职场、生活必备】生活无处不销售，销售人员业绩倍增的秘诀">【职场、生活必备】生活无处不销售，销售人员业绩倍增的秘诀</a>
								</li>
								<li>
									<i class="rank-menu-num rank-menu-num-6"></i>
									<a href="#" class="rank-description rank-description-other" title="淘宝成交网店秘密流量、销量提升店铺优化宝典淘宝推广">淘宝成交网店秘密流量、销量提升店铺优化宝典淘宝推广</a>
								</li>
								<li>
									<i class="rank-menu-num rank-menu-num-7"></i>
									<a href="#" class="rank-description rank-description-other" title="微信公众平台入门到精通">微信公众平台入门到精通</a>
								</li>
								<li>
									<i class="rank-menu-num rank-menu-num-8"></i>
									<a href="#" class="rank-description rank-description-other" title="淘宝运营实战课堂">淘宝运营实战课堂</a>
								</li>
								<li>
									<i class="rank-menu-num rank-menu-num-9"></i>
									<a href="#" class="rank-description rank-description-other" title="网络营销从入门到精通">网络营销从入门到精通</a>
								</li>
							</ul>
							<ul class="rank-menu-ul img-hide">
								<li class="rank-menu-li-first">
									<i class="rank-menu-num rank-menu-num-1"></i>
									<div class="rank-menu-content">
										<a href="#" class="rank-description" title="影楼后期VIP">影楼后期VIP</a>
										<a href="#" class="rank-free-img"><img src="resources/images/rank-menu2.jpg" alt="影楼后期VIP" width="90" height="50" border="0" /></a>
										<div class="rank-menu-course">
											<span class="charge" style="font-size:14px">¥880.00</span>
											<span class="rank-college">潭州学院</span>
										</div>
										<div class="clear"></div>
									</div>
								</li>
								<li>
									<i class="rank-menu-num rank-menu-num-2"></i>
									<a href="#" class="rank-description rank-description-other" title="会计从业资格证考试（财经法规+电算化）【e学通】">会计从业资格证考试（财经法规+电算化）【e学通】</a>
								</li>
								<li>
									<i class="rank-menu-num rank-menu-num-3"></i>
									<a href="#" class="rank-description rank-description-other" title="腾讯QQ精准营销内训班">腾讯QQ精准营销内训班</a>
								</li>
								<li>
									<i class="rank-menu-num rank-menu-num-4"></i>
									<a href="#" class="rank-description rank-description-other" title="真账实操学出纳实务（完整版）">真账实操学出纳实务（完整版）</a>
								</li>
								<li>
									<i class="rank-menu-num rank-menu-num-5"></i>
									<a href="#" class="rank-description rank-description-other" title="真账实操学会计做账（完整版）">真账实操学会计做账（完整版）</a>
								</li>
								<li>
									<i class="rank-menu-num rank-menu-num-6"></i>
									<a href="#" class="rank-description rank-description-other" title="真账实操学报税税务（完整版）">真账实操学报税税务（完整版）</a>
								</li>
								<li>
									<i class="rank-menu-num rank-menu-num-7"></i>
									<a href="#" class="rank-description rank-description-other" title="互联网整合营销VIP内训班">互联网整合营销VIP内训班</a>
								</li>
								<li>
									<i class="rank-menu-num rank-menu-num-8"></i>
									<a href="#" class="rank-description rank-description-other" title="企业网络营销入门到精通">企业网络营销入门到精通</a>
								</li>
								<li>
									<i class="rank-menu-num rank-menu-num-9"></i>
									<a href="#" class="rank-description rank-description-other" title="三菱工控系列答疑【技成会员专属】">三菱工控系列答疑【技成会员专属】</a>
								</li>
							</ul>
						</div>
					</div>

				</div>
			</div>
			<!--article start-->
			<div class="art">

				<div class="article">
					<div class="h-novice h-novice-first">
						<img class="cover" src="resources/images/ui2.png" />
						<ul class="list" style="list-style:none outside none">
							<li>
								<a href="" class="ellipsis" title="我们为何要在设我们为何要在设计中重视我们为何要在设计中重视我们为何要在设计中重视计中重视“留白”">我们为何要在设计中重视“留白”</a>
								<span class="tips"></span>
							</li>
						</ul>
						<a class="more" href="/pages/article/article.jsp">更多...</a>
					</div>

					<div class="h_novice">
						<div class="pos">
							<a href="" class="cover">
								<img width="280" height="210" src="resources/images/t1.jpg" class="imgloadinglater" alt="一篇文章读懂数字化驾舱体验设计" rel="nofollow" style="display: inline;">
							</a>
							<i class="h-novice-tag"><span class="txt">资讯</span></i>
							<div class="info">
								<h1><a href="" target="_blank">一篇文章读懂数字化驾舱体验设计</a></h1>
								<p class="txt">数字化驾舱近来大热，数字化驾舱的组成元素包含哪些以及又有哪些驾舱相关的新技术出现？MOMOUX让你读懂数字化驾舱。</p>
							</div>
							<div class="author">
								<a href="" class="avatar z" target="_blank">
									<img width="50" height="50" src="resources/images/foot-logo.png" class="imgloadinglater" alt="momoux" style="display: inline;">
								</a>
								<div class="z">
									<h5 class="name"><a href="" target="_blank">momoux</a></h5>
									<span class="mr15"><i class="layui-icon layui-icon-dialogue"></i><em>12</em></span>
									<span class="mr15"><i class="layui-icon layui-icon-log"></i><em>960</em></span>
								</div>
							</div>
							<a class="cover" href="" target="_blank">
								<img class="cover imgloadinglater" width="280" height="210" src="resources/images/linian.png" alt="UI设计规范" style="display: block;">
							</a>
						</div>

					</div>
					<div class="h-novice" style="float: left; width: 280px;background-color: #fff;">
						<a class="cover pos" href="" target="_blank">
							<img width="280" height="210" src="resources/images/banner-2.jpg" alt="第一百九十九期：AI打造渐变科技感图案">
						</a>
						<div class="pos">
							<a class="cover" href="" target="_blank">
								<img width="280" height="210" src="resources/images/course/course13.png" alt="国外大神经验，做好动效你需要了解这些细节" style="display: inline;">
							</a>
							<i class="icon-hexagon-tag h-novice-tag">
							<span class="txt">教程</span>
						</i>
							<div class="info">
								<h1><a href="" target="_blank">国外大神经验，做好动效你需要了解这些细节</a></h1>
								<p class="txt">这不仅仅是一篇经验，而是前辈用日积月累得工作心得，用笔记用脑想，最重要得是要走心。还有我是占位符不是简介。</p>

							</div>
							<div class="author">
								<a href="" class="avatar z" target="_blank"><img width="50" height="50" src="resources/images/foot-logo.png" alt="彩云Sky"></a>
								<div class="z">
									<h5 class="name"><a href="" target="_blank">彩云Sky</a></h5>
									<span class="mr15"><i class="layui-icon layui-icon-dialogue"></i><em>12</em></span>
									<span class="mr15"><i class="layui-icon layui-icon-log"></i><em>960</em></span>
								</div>
							</div>
						</div>
					</div>
					<div class="h-novice" style="float: left; width: 280px;background-color: #fff;">
						<div class="pos">
							<a class="cover" href="" target="_blank">
								<img width="280" height="210" src="resources/images/1.gif" alt=" AE教程：食物界面动效设计" style="display: inline;">
							</a>
							<i class="icon-hexagon-tag h-novice-tag"><span class="txt">教程</span></i>
							<div class="info">
								<h1><a href="" target="_blank"> AE教程：食物界面动效设计</a></h1>
								<p class="txt">这不仅仅是一篇经验，而是前辈用日积月累得工作心得，用笔记用脑想，最重要得是要走心。还有我是占位符不是简介。</p>
							</div>
							<div class="author">
								<a href="" class="avatar z" target="_blank"><img width="50" height="50" src="resources/images/banner-5.jpg"></a>
								<div class="z">
									<h5 class="name"><a href="" target="_blank">UILEO</a></h5>
									<span class="mr15"><i class="layui-icon layui-icon-dialogue"></i><em>12</em></span>
									<span class="mr15"><i class="layui-icon layui-icon-log"></i><em>960</em></span>
								</div>
							</div>
						</div>
						<a class="cover" href="" target="_blank">
							<img class="cover" width="280" height="210" src="resources/images/A2.jpg">
						</a>
					</div>
				</div>
			</div>
			<div style="clear: both;"></div>
		</div>
		<!--article end-->

		</div>
		<!--end course_hot-->
		<!-- footer start -->
		<jsp:include page="/pages/common/footer.jsp"></jsp:include>
		<!-- footer end -->
		<script>
			$(function() {
				var h3_height = $(".course_h2").offset().top;
				//				alert(h3_height);
				$(window).scroll(function() {
					var this_scrollTop = $(this).scrollTop();
					//					alert(this_scrollTop);
					if(this_scrollTop > h3_height) {
						$(".course_h2").show();
					}
				});
			});
		</script>
		<script>
			var course = [];
			var courseid = [];
			var courseid1 = [];
			var courseid2 = [];
			var courseid3 = [];
			var courseid4 = [];
			var courseid5 = [];
			$(document).ready(function() {
				$.ajax({
					type: "post",
					url: "/course/queryRecommedCourse.action",
					dataType: 'json',
					success: function(data) {
						$.each(data.course, function(index, item) {
							var courseIntergal = "";
							if(item.courseIntergal == 0) {
								courseIntergal = "免费";
							} else {
								courseIntergal = item.courseIntergal + "积分";
							}
							var li = "<li> <div class='courses'> <a href='/pages/course/coursedetails.jsp?courseId=" + item.courseId + "'> <img class='course_img' src='" + item.coursePicture + "' /> </a>"
							li += "<div class='course_title'> " + item.courseDescribe + " </div> <div class='course_other'> "
							li += "<span class='price'>" + courseIntergal + "</span> <span class='pl'>|</span> "
							li += "<span class='course_user'><a href=''>" + item.user_Name + "</a></span> </div> </div> </li>"
							$(".course_box .recommend").append(li);
						});
					}
				});

				$.ajax({
					type: "post",
					url: "/course/queryRecommedCourse.action",
					dataType: "json",
					success: function(data) {
						$.each(data.course, function(index, item) {
							var courseIntergal = "";
							if(item.courseIntergal == 0) {
								courseIntergal = "免费";
							} else {
								courseIntergal = item.courseIntergal + "积分";
							}
							var li = "<li> <div class='courses'> <a href='/pages/course/coursedetails.jsp?courseId=" + item.courseId + "'> <img class='course_img' src='" + item.coursePicture + "' /> </a>"
							li += "<div class='course_title'> " + item.courseDescribe + " </div> <div class='course_other'> "
							li += "<span class='price'>" + courseIntergal + "</span> <span class='pl'>|</span> "
							li += "<span class='course_user'><a href=''>" + item.user_Name + "</a></span> </div> </div> </li>"
							$("#free").append(li);
						});
					}
				});
				var list = [];
				$.ajax({
					type: "post",
					url: "/course/queryFourCourseType.action",
					dataType: "json",
					success: function(data) {
						var i = 1;
						$.each(data.bigCourseType, function(index, item) {
							var li = "";
							if(i <= 1) {
								li += "<li class='course_li_on'>"
							} else {
								li += "<li>"
							}
							li += "<input type ='hidden' value='" + item.courseTypeId + "' / >"
							if(i <= 1) {
								li += "<a href='#' style='color:#188eee'>" + item.typeValue + "</a> </li>"
							} else {
								li += "<a href='#' >" + item.typeValue + "</a> </li>"
							}
							$(".job-type").append(li);
							i++;
						});

						$(".job-type li").each(function(index) {
							$(this).hover(function() {
								var _index = $(this).index();
								var $menu = $(".catalog-menu .catalog-menu-div ul").eq(index);
								$menu.stop();
								$menu.find("li .course-img").stop();
								$menu.fadeIn("600").show().siblings("ul").hide();
								$(".course-rank").eq(index).fadeIn("600").show().siblings(".course-rank").hide();

							})
							var courseTypeId = $(this).find("input").val();
							list.push(courseTypeId);
						})

						$.each(list, function(index, item) {
							$.ajax({
								type: "post",
								url: "/course/queryRecommenCourseByTypeId.action",
								data: {
									"course.courseTypeId": item
								},
								dataType: "json",
								success: function(data) {
									$.each(data.course, function(ind, item) {
										var courseIntergal = "";
										if(item.courseIntergal == 0) {
											courseIntergal = "免费";
										} else {
											courseIntergal = item.courseIntergal + "积分";
										}
										var li = "<li> <div class='courses shadow'> <a href='/pages/course/coursedetails.jsp?courseId=" + item.courseId + "'> "
										li += "<img class='course_img' src='" + item.coursePicture + "' /> </a> <div class='course_title'> " + item.courseDescribe
										li += "</div> <div class='course_other'> <span class='price'>" + courseIntergal + "</span>"
										li += "<span class='pl'>|</span> <span class='course_user'><a href=''>" + item.user_Name + "</a></span> </div> </div> </li>"
										if(index == 0) {
											$(".oneType").append(li);
										} else if(index == 1) {
											$("#twoType").append(li);
										} else if(index == 2) {
											$("#threeType").append(li);
										} else {
											$("#fourType").append(li);
										}
									});
								}
							});
						});
					}
				});

				$.ajax({
					type: "post",
					url: "/article/queryTenArticle.action",
					dataType: "json",
					success: function(data) {
						$.each(data.article, function(index, item) {
							var li = "<li> <a href='/pages/article/articledetails.jsp?articleId=" + item.articleId + "' class='ellipsis' title='" + item.articleTitle + "'>" + item.articleTitle + "</a> <span class='tips'></span> </li>";
							$(".list").append(li);
						});
						layui.use("layer", function() {
							var layer = layui.layer;
							$(".list li").each(function(index) {
								var value = $(this).children().attr('title');
								var tip_index = 0;
								$(this).on('mouseenter', $(this).children(".tips"), function() {
									tip_index = layer.tips(value, $(this).children(".tips"), {
										tips: [3, '#3595CC'],
										time: 0
									});
								}).on('mouseleave', $(this).children(".tips"), function() {
									layer.close(tip_index);
								});

							});
						});

					}
				});

				/*目录渲染开始*/
				var q = 1;
				$.ajax({
					type: "post",
					url: "/course/queryAllBigCourseType.action",
					dataType: "json",
					success: function(data) {
						var courseBigId = data.courseBigId;
						var i = 1;
						var ii = 1;
						$.each(courseBigId, function(index, item) {
							var li = "<li class='course-li'><input type='hidden' value='" + item.courseTypeId + "'> <a href='#' class='course'>" + item.typeValue + "</a><i></i> <div class='course-list'> <ul id='ul" + i + "'> </ul> </div> </li>";
							$("#bigMenu").append(li);
							i++;
						});
						$("#bigMenu li").each(function(index) {
							var courseTypeId = $(this).find("input").val();
							course.push(courseTypeId);
						})
						$.each(course, function(index, item) {
							$.ajax({
								type: "post",
								url: "/course/queryAllTwoCourseType.action",
								data: {
									"coursetype.courseSubTypeId": item
								},
								dataType: "json",
								success: function(data) {
									var courseTwoId = data.courseTwoId;
									$.each(courseTwoId, function(ind, item) {
										var li = "<li><a href='#' class='course-child'>" + item.typeValue + "</a>"
										li += "<div class='course-child-list' id='course" + q + "'></div>"
										li += "<input type='hidden' value= '" + item.courseTypeId + "'>"
										li += "</li>";
										if(index == 0) {
											$("#ul1").append(li);
										} else if(index == 1) {
											$("#ul2").append(li);
										} else if(index == 2) {
											$("#ul3").append(li);
										} else if(index == 3) {
											$("#ul4").append(li);
										} else if(index == 4) {
											$("#ul5").append(li);
										} else if(index == 5) {
											$("#ul6").append(li);
										}
										q++;
									});
									$("#ul1 li").each(function(index) {
										var courseTypeId = $(this).find("input").val();
										if($.inArray(courseTypeId, courseid) == -1) {
											courseid.push(courseTypeId);
										}
									});
									$("#ul2 li").each(function(index) {
										var courseTypeId = $(this).find("input").val();
										if($.inArray(courseTypeId, courseid1) == -1) {
											courseid1.push(courseTypeId);
										}
									});
									$("#ul3 li").each(function(index) {
										var courseTypeId = $(this).find("input").val();
										if($.inArray(courseTypeId, courseid2) == -1) {
											courseid2.push(courseTypeId);
										}
									});
									$("#ul4 li").each(function(index) {
										var courseTypeId = $(this).find("input").val();
										if($.inArray(courseTypeId, courseid3) == -1) {
											courseid3.push(courseTypeId);
										}
									});
									$("#ul5 li").each(function(index) {
										var courseTypeId = $(this).find("input").val();
										if($.inArray(courseTypeId, courseid4) == -1) {
											courseid4.push(courseTypeId);
										}
									});
									$("#ul6 li").each(function(index) {
										var courseTypeId = $(this).find("input").val();
										if($.inArray(courseTypeId, courseid5) == -1) {
											courseid5.push(courseTypeId);
										}
									});
									/*课程导航右侧菜单显示 */
									$(".course-li").hover(function() {
										$(this).find(".course-list").fadeIn("slow").show();
									}, function() {
										$(".course-list").stop();
										$(this).find(".course-list").fadeOut("slow").hide();
									})

								}
							});
							ii++;
						});
						if(ii == 7) {
//							console.log(courseid);
//							console.log(courseid1);
//
//							console.log(courseid2);
//
//							console.log(courseid3);
//
//							console.log(courseid4);
//							console.log(courseid5);
							ff();
						}
						q = 1;
					}
				});
			});
		</script>
		<script>
			function ff() {
				var courseid = ["9", "10", "11", "12", "13"];
				var courseid1 = ["34", "35", "36", "37"];
				var courseid2 = ["46", "47", "48", "49"];
				var courseid3 = ["60", "61", "62"];
				var courseid4 = ["69", "70", "71", "72"];
				var courseid5 = ["88", "89", "90", "91"];
				$.each(courseid, function(index, item) {
					$.ajax({
						type: "post",
						url: "/course/queryAllTwoCourseType.action",
						data: {
							"coursetype.courseSubTypeId": item
						},
						dataType: "json",
						success: function(data) {
							var result = data.courseTwoId;
							console.log(result)
							$.each(result, function(i, t) {
								var a = "<a href=''>" + t.typeValue + "</a>"
								if(index == 0) {
									$("#course1").append(a);
								} else if(index == 1) {
									$("#course2").append(a);
								} else if(index == 2) {
									$("#course3").append(a);
								} else if(index == 3) {
									$("#course4").append(a);
								} else if(index == 4) {
									$("#course5").append(a);
								}
							});

						}
					});
				});

				$.each(courseid1, function(indd, item) {
					$.ajax({
						type: "post",
						url: "/course/queryAllTwoCourseType.action",
						data: {
							"coursetype.courseSubTypeId": item
						},
						dataType: "json",
						success: function(data) {
							var result = data.courseTwoId;
							$.each(result, function(i, t) {
								var a = "<a href=''>" + t.typeValue + "</a>"
								if(indd == 0) {
									$("#course6").append(a);
								} else if(indd == 1) {
									$("#course7").append(a);
								} else if(indd == 2) {
									$("#course8").append(a);
								} else if(indd == 3) {
									$("#course9").append(a);
								}
							});

						}
					});
				});
				
				
				$.each(courseid2, function(indd, item) {
					$.ajax({
						type: "post",
						url: "/course/queryAllTwoCourseType.action",
						data: {
							"coursetype.courseSubTypeId": item
						},
						dataType: "json",
						success: function(data) {
							var result = data.courseTwoId;
							$.each(result, function(i, t) {
								var a = "<a href=''>" + t.typeValue + "</a>"
								if(indd == 0) {
									$("#course10").append(a);
								} else if(indd == 1) {
									$("#course11").append(a);
								} else if(indd == 2) {
									$("#course12").append(a);
								} else if(indd == 3) {
									$("#course13").append(a);
								}
							});

						}
					});
				});
				
				
				$.each(courseid3, function(indd, item) {
					$.ajax({
						type: "post",
						url: "/course/queryAllTwoCourseType.action",
						data: {
							"coursetype.courseSubTypeId": item
						},
						dataType: "json",
						success: function(data) {
							var result = data.courseTwoId;
							$.each(result, function(i, t) {
								var a = "<a href=''>" + t.typeValue + "</a>"
								if(indd == 0) {
									$("#course14").append(a);
								} else if(indd == 1) {
									$("#course15").append(a);
								} else if(indd == 2) {
									$("#course16").append(a);
								} 
							});

						}
					});
				});
				
				
				$.each(courseid4, function(indd, item) {
					$.ajax({
						type: "post",
						url: "/course/queryAllTwoCourseType.action",
						data: {
							"coursetype.courseSubTypeId": item
						},
						dataType: "json",
						success: function(data) {
							var result = data.courseTwoId;
							$.each(result, function(i, t) {
								var a = "<a href=''>" + t.typeValue + "</a>"
								if(indd == 0) {
									$("#course17").append(a);
								} else if(indd == 1) {
									$("#course18").append(a);
								} else if(indd == 2) {
									$("#course19").append(a);
								} else if(indd == 3) {
									$("#course20").append(a);
								}
							});

						}
					});
				});
				$.each(courseid5, function(indd, item) {
					$.ajax({
						type: "post",
						url: "/course/queryAllTwoCourseType.action",
						data: {
							"coursetype.courseSubTypeId": item
						},
						dataType: "json",
						success: function(data) {
							var result = data.courseTwoId;
							$.each(result, function(i, t) {
								var a = "<a href=''>" + t.typeValue + "</a>"
								if(indd == 0) {
									$("#course21").append(a);
								} else if(indd == 1) {
									$("#course22").append(a);
								} else if(indd == 2) {
									$("#course23").append(a);
								} else if(indd == 3) {
									$("#course24").append(a);
								}
							});

						}
					});
				});
			}
		</script>
	</body>

</html>